<template>
  <div >
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in newsList" v-bind:key="item.id">
                <!-- 取值去掉{{}}则需在事件前加: -->
                <router-link :to="'/home/newsinfo/'+item.id">
                    <!-- img动态路径src前必须加: -->
                    <img class="mui-media-object mui-pull-left" :src="item.img_url">
                    <div class="mui-media-body">
                        <h1>{{item.title}}</h1>
                        <p class='mui-ellipsis'>
                            <span>发表时间：{{item.add_time|dataFormat}}</span>
                            <span>点击：{{item.click}}次</span>
                        </p>
                    </div>
                </router-link>
            </li>
        </ul>
  </div>
</template>

<script>
import {Toast} from 'mint-ui'
export default {
  data(){
      return {
        newsList:[]
      }
  },
  created(){
      this.getNewsList()
  },
  methods:{
      getNewsList(){//获取新闻列表
        this.$axios({
          method:'get',
          url:'/api/getnewslist',
      }).then((response) =>{          //这里使用了ES6的语法
          //console.log(response)       //请求成功返回的数据
          if(response.data.status===0){
            this.newsList = response.data.message
          }else{
            Toast('获取新闻列表失败！')
          }
      }).catch((error) =>{
          console.log(error)       //请求失败返回的数据
      })
      }
  }
}
</script>

<style scoped>
.mui-table-view li h1{
    font-size: 14px;
}
.mui-table-view li .mui-ellipsis{
    font-size: 12px;
    color:#226aff;
    display: flex;
    justify-content: space-between;
}
</style>
